<template>
  <div class="container">
    <div class="app-container">
      <el-tree :expand-on-click-node="false" default-expand-all :data="data" :props="defaultProps">
        <template #default="{ data }">
          <el-row type="flex" style="width: 100%;" justity="space-between">

            <el-col>
              <span>{{ data.name }}</span>
            </el-col>

            <span>
              <span class="manager">{{ data.managerName }}</span>
            </span>
            <el-dropdown :expand-on-click-node="false" @command="clickDropdown($event,data.id)">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item command="edit">火锅</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>

          </el-row>
        </template>

      </el-tree>
    </div>

    <addDept ref="ruleForm" :current-id="currentId" :show-dialog.sync="showDialog" @updateDepartment="getDepartmentData" />
  </div>
</template>
<script>
import { delManagerList, getDepartment } from '@/api/department'
import { translateListToTreeData } from '@/utils'
import addDept from './components/add-dept.vue'
export default {
  name: 'Department',
  components: {
    addDept
  },
  data() {
    return {
      date: [{
        name: '传智教育',
        managerName: '管理员',
        children: [
          {
            name: '总裁办',
            managerName: '黑马希特勒'
          },
          {
            name: '行政部',
            managerName: '黑马罗斯福'
          },
          {
            name: '人事部',
            managerName: '黑马林肯',
            children: [
              {
                name: '财务核算部',
                managerName: '黑马奥巴马'
              },
              {
                name: '税务管理部',
                managerName: '黑马拜登',
                children: [{
                  name: '123122',
                  managerName: '黑马特朗普'
                }]
              },
              {
                name: '薪资管理部',
                managerName: '黑马马克龙'
              }
            ]
          },
          {
            name: '财务部',
            managerName: '黑马克林顿',
            children: [{
              name: 'PHP研发部',
              managerName: '黑马华盛顿'
            }]
          },
          {
            name: '技术部',
            managerName: '黑马肯尼迪'
          },
          {
            name: '运营部',
            managerName: '黑马杜鲁门',
            children: [
              {
                name: '上海事业部',
                managerName: '黑马马斯克'
              },
              {
                name: '北京事业部',
                managerName: '黑马比尔盖茨'
              }
            ]
          },
          {
            name: '市场部',
            managerName: '黑马霍金',
            children: [
              {
                name: '一个好的部门',
                managerName: '黑马阿伟'
              }
            ]
          }
        ]
      }],
      data: [],
      defaultProps: {
        label: 'name'
      },
      showDialog: false,
      currentId: -1

    }
  },
  created() {
    this.getDepartmentData()
  },
  methods: {
    async getDepartmentData() {
      const res = await getDepartment()
      this.data = translateListToTreeData(res, 0)
    },
    async clickDropdown(type, id) {
      if (type === 'add') {
        this.showDialog = true
        this.currentId = id
      } else if (type === 'edit') {
        this.showDialog = true
        this.currentId = id
        this.$nextTick(() => {
          this.$refs.ruleForm.getDepartmentDetail()
        })
      } else if (type === 'del') {
        await delManagerList(id)
        this.currentId = id
        this.getDepartmentData()
      }
    }
  }
}
</script>

<style>
.app-container {
  padding: 30px 40px;
  font-size: 14px;
}

.manager {
  width: 100px;
  display: inline-block;
}
</style>
